// render 函数 负责将一个Vnode渲染到dom节点上
// h 函数 创建vnode
import {render,h} from "vue"
import type {CreateMessageProps,MessageContext} from "./type"
import Message from "./Message.vue"

//创建一个数组，用来存放实例
const instances:MessageContext[]=[]
let seed=1

export const createMessage=(props :CreateMessageProps)=>{
    let id=`message_${seed++}`
    //1.创建DOM元素
    const container=document.createElement('div')
    // -----移除节点
    const destroy=()=>{
        render(null,container)
    }
    const newProps={
        ...props,
        onDestroy:destroy
    }

    //2.创建虚拟DOM节点
    const vnode=h(Message,newProps)


    //3.渲染DOM
    render(vnode,container)
    //4.将DOM元素添加到页面上
    document.body.appendChild(container.firstElementChild!)//这里打个！号，非空断言，表示这里一定存在

    //创建组件实例
    const instance={
        id,
        vnode,
        props:newProps
    }
    instances.push(instance)
    return instance
}


//获取到数组的最后一项
export const getLastInstance=()=>{
    return instances[instances.length-1]
}